<template>
<div>
  <el-row>
    <el-col :md="6" :xs="20" v-for="item in MvData" :key="item.index">
      <el-row>
        <div :id="item.artistId" >
          <img :src="item.cover" style="width: 390px;height:200px;margin-left: 60px;cursor: pointer;display: block">
          <div class="image-slot">
            <i class="el-icon-video-camera"><span style="margin-left: 10px">{{ (item.playCount/10000).toFixed(1)}}万</span></i>
          </div>
          <div id="video-play">
            <i class="el-icon-video-play" @click="playVideo(item.id,item.artistId)"></i>
          </div>
        </div>
        <video :id="item.id" style="width: 390px;height:200px;margin-left: 60px;cursor: pointer;display: none"  controls ></video>
      </el-row>
      <el-row>
        <h4 style="text-align: center;">{{item.artistName}}：{{item.name}}</h4>
      </el-row>

    </el-col>
  </el-row>
</div>
</template>

<script>
import moveApi from "@/musicApi/apis/move";

export default {
  name: "moveList",
  props:["MvData"],
  data(){
    return{
      mvUrl:''
    }
  },
  methods:{
    playVideo(mvId,artistId){
      const mv=document.getElementById(mvId)
      mv.style.display='inline'
      document.getElementById(artistId).style.display='none'
      moveApi.getMvUrl(mvId).then(res=>{
        mv.src=res.data.data.url
      })
    }
  }
}
</script>

<style scoped>
.image-slot{
  background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 97%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 97%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 97%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 );
  position: absolute;
  top: 10px;
  left: 320px;
  color: #ffcc00;
}
#video-play{
  position: absolute;
  top:70px;
  left: 230px;
  color: whitesmoke;
  font-size: 50px;
  cursor: pointer;
}

</style>